<template>
	<view>

		<view class="tabcheck flex justify-start align-center relative">
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item cu-item-last relative" :class="index==TabCur?'text-big-eye active':''"
					v-for="(item,index) in 10" :key="index" @tap="tabSelect" :data-id="index">
					餐饮+{{index}}
				</view>
				<!-- <view class="cu-item"></view> -->
			</scroll-view>
		</view>
		<view style="width:750rpx;height:100rpx;"></view>

		<!-- 内容区 -->
		<view class="goods" v-for="(item,index) in 6" :key="index">
			<view class="goods-pic relative">
				<image class="pic" src="/static/test/rb.jpeg"></image>

				<!-- 已经团购了多少 -->
				<view class="group">
					已团200件
				</view>
				<!-- 已经售罄 -->
				<view class="over-all">
					已售罄
				</view>
			</view>

			<view class="goods-text">
				<view class="title">
					这个是拼团商品的标题，需要测试一下长度之类的东西还有自提大小之类的
				</view>
			</view>

			<view class="text-more flex justify-start align-center ">
				<image class="img" src="/static/mine/pintuan.png"></image>
				<view class="text1 flex align-center justify-between ">
					<text class="item1">
						2-4人团
					</text>
					<text class="item2">
						￥750
					</text>
				</view>
				<view class="avatar flex align-center justify-between">
					<image class="a-pic" src="/static/logo.png"></image>
					<image class="a-pic" src="/static/logo.png"></image>
					<image class="a-pic" src="/static/logo.png"></image>

				</view>
				<view class="text2">
					去开团
				</view>


			</view>

		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0

			}
		},
		onLoad() {

		},
		methods: {
			// 底部选显卡切换
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},

		}
	}
</script>

<style lang="scss">
	.tabcheck {
		width: 750rpx;
		height: 100rpx;
		padding: 0 32rpx;
		position: fixed;
		top:0;
		left:0;
		background-color: white;
		z-index:99999;

		.active {
			// font-size: 40rpx;
			font-family: PingFangSC-Heavy, PingFang SC;
			// font-weight: 800;
			// color: #FFFFFF;

			&:after {
				content: '';
				position: absolute;
				bottom: 12rpx;
				top: auto;
				left: 46rpx;
				width: 48rpx;
				height: 6rpx;
				background: #DC2D20;
				border-radius: 3rpx;
			}
		}

		.tab-more {
			position: absolute;
			top: 0;
			right: 32rpx;
			width: 64rpx;
			height: 100rpx;
			background-color: white;
			z-index: 99;
			box-shadow: -14rpx 0rpx 10rpx -10rpx rgba(0, 0, 0, 0.1);
		}

		.cu-item-last:last-child {
			margin-right: 100rpx;
			// background-color: red;
		}
	}

	// 拼团商品
	.goods {
		width: 750rpx;
		margin-top: 32rpx;

		.goods-pic {
			width: 750rpx;
			height: 280rpx;
			padding:0 32rpx;
			.pic {
				width: 686rpx;
				height: 100%;
				border-radius: 16rpx;
			}

			.group {
				width: 168rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				background-color: #d4237a;
				color: white;
				position: absolute;
				left: 32rpx;
				bottom: 30rpx;
				border-radius: 0 20rpx 20rpx 0;
			}

			.over-all {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 100rpx;
				position: absolute;
				top: 30rpx;
				right: 64rpx;
				background-color: #DDDDDD;
				color:white;
			}

		}

		.goods-text {
			width: 750rpx;
			padding: 0 32rpx;
			margin-top: 24rpx;

			.title {
				line-height: 50rpx;
				font-size: 30rpx;

			}
		}

		.text-more {
			width: 750rpx;
			height: 100rpx;
			padding: 0 32rpx;

			.img {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
			}

			.text1 {
				width: 200rpx;
				margin: 0 32rpx;

			}

			.avatar {
				margin-right: 32rpx;

				.a-pic {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					margin-right: 12rpx;
				}

			}

			.text2 {
				width: 160rpx;
				height: 60rpx;
				background-color: #d4237a;
				color: white;
				font-size: 28rpx;
				line-height: 60rpx;
				text-align: center;
			}

		}

	}
</style>
